<template>
   <div>
       <div class="login_container">
           <div class="avatar_box" >
                <img src="login.jpg"/>
           </div>
           <div class="login_box">
               <el-form :model="loginFrom" :rules="loginFromRules" class="login_form"  >
                   <el-form-item prop="userId">
                       <el-input v-model="loginFrom.userId" prefix-icon="el-icon-user"></el-input>
                   </el-form-item>
                   <el-form-item prop="passWord">
                       <el-input v-model="loginFrom.passWord" prefix-icon="el-icon-lock" type="password"></el-input>
                   </el-form-item>
                   <el-form-item class="button">
                       <el-button type="primary" plain @click="Login_From">登录</el-button>
                       <el-button type="info" plain @click="ResetLoginFrom">重置</el-button>
                   </el-form-item>
               </el-form>
           </div>
       </div>
   </div>
</template>
<script>
    import {adminlogin} from "../network/admin"

    export default {
        name: "Login",

        data(){
            return{
                show: false,

                loginFrom:{
                    userId:'',
                    passWord:'',
                },
                loginFromRules:{
                    sId: [
                        { required: true, message: '请输入登录名', trigger: 'blur' },
                        { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }

                    ]
                }
            }
        },
        methods:{
            Login_From(){
                adminlogin(this.loginFrom.userId,this.loginFrom.passWord).then((res)=>{
                    console.log(res);
                    if (res.data.login =="false"){
                        this.$message({
                            type: 'error',
                            message: "登陆失败,账号或密码错误"
                        });
                    }else {
                        this.$message({
                            type: 'success',
                            message: "登陆成功!\n\n欢迎您,评委"+res.data.login.id
                        });
                        window.sessionStorage.setItem('token',res.data.login.id)
                        this.$router.push('/index')
                    }
                })
            }
        },
        created() {
        }
    }


</script>

<style scoped>


    .login_container{
        height: 100vh;
        width: 100vw;
        background: #347e99;
        /*background-repeat: no-repeat;*/
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .avatar_box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        z-index: 1000;
    }
    .avatar_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;


    }
    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px 20px;

        box-sizing: border-box;

    }
    .button{
        display: flex;
        justify-content: flex-end;
        margin: 5px;
    }


</style>
